<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta name="renderer" content="webkit"/>
    <meta name="force-rendering" content="webkit"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta charset="UTF-8"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0, viewport-fit=cover"/>
    <title>XBoot智能助手客服</title>
    <link rel="stylesheet" href="./js/sdk@0.3.2/sdk.css">
    <link rel="stylesheet" href="./my-style.css">
</head>

<body>
<div id="root"></div>
<script src="./js/sdk@0.3.2/sdk.js"></script>
<script src="./js/axios@1.4.0/axios.min.js"></script>
<script>

    init();

    function getVariable(variable) {
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        for (var i = 0; i < vars.length; i++) {
            var pair = vars[i].split("=");
            if (pair[0] == variable) {
                return pair[1];
            }
        }
        return (false);
    }

    function init() {
        if (getVariable("accessToken") == false) {
            alert("您还未登录");
            window.location.href = "http://xboot.exrick.cn";
        }
        axios.get("/xboot/setting/autoChat?accessToken=" + getVariable("accessToken"))
            .then(res => {
                res = res.data;
                if (res.success) {
                    runSDK(res.result);
                } else {
                    alert(res.message);
                }
            })
            .catch(error => {
                alert(error);
            });
    }

    function runSDK(v) {
        if (!v.avatar) {
            v.avatar = "./img/avatar.jpg";
        }
        if (v.quickReplies && v.quickReplies != "null") {
            v.quickReplies = JSON.parse(v.quickReplies);
        }
        var bot = new ChatSDK({
            config: {
                navbar: {
                    title: v.title
                },
                robot: {
                    avatar: v.avatar
                },
                // 初始化首屏消息
                messages: [
                    {
                        type: 'system',
                        content: {
                            text: v.sysMessage
                        },
                    },
                ],
                // 快捷短语
                quickReplies: v.quickReplies,
                // 输入框占位符
                placeholder: v.placeholder,
                // 侧边栏
                sidebar: [
                    {
                        title: v.noticeTitle,
                        code: v.noticeType,
                        data: {
                            text: v.noticeContent
                        },
                    },
                ],
                toolbar: [
                    {
                        type: 'image',
                        icon: 'image',
                        title: '相册',
                    },
                ],
                feedback: {
                    // 点赞后出的文本
                    textOfGood: v.textOfGood,
                    // 点踩后出的文本
                    textOfBad: v.textOfBad,
                    // 点踩后是否显示反馈表单
                    needFeedback: false,
                },
            },
            requests: {
                // 消息回答接口
                send: function (msg) {
                    if (msg.type === 'text') {
                        return {
                            url: "/xboot/autoChat/ask?accessToken=" + getVariable("accessToken"),
                            data: {
                                q: msg.content.text
                            }
                        };
                    }
                },
                // 联想输入
                autoComplete(data) {
                    return {
                        url: "/xboot/autoChat/associate?accessToken=" + getVariable("accessToken"),
                        data: {
                            q: data.text,
                        },
                    };
                },
                // 点赞接口
                evaluate(data) {
                    return {
                        url: "/xboot/autoChat/evaluate?accessToken=" + getVariable("accessToken"),
                        data: {
                            messageId: data.msgId,
                            evaluateType: data.type,
                        },
                    };
                }
            },
            handlers: {
                onToolbarClick(item, ctx) {
                    // 如果点的是“相册”
                    if (item.type === 'image') {
                        ctx.util.chooseImage({
                            // multiple: true, // 是否可多选
                            success(e) {
                                let file;
                                if (e.files) { // 如果有 h5 上传的图
                                    file = e.files[0];
                                } else if (e.images) { // 如果有 app 上传的图
                                    file = e.images[0];
                                }
                                handleImage(ctx, file)
                            },
                        });
                    }
                }
            }
        });
        // 运行
        bot.run();
        // 初始化消息
        if (v.welcomeMessage) {
            bot.getCtx().appendMessage(
                {
                    type: 'text',
                    content: {
                        text: v.welcomeMessage
                    },
                });
        }
        if (v.initMessage && v.initMessage != "<p><br></p>") {
            bot.getCtx().appendMessage({
                type: "card",
                content: {
                    code: "knowledge",
                    data: {
                        text: v.initMessage
                    }
                }
            });
        }
    }

    function handleImage(ctx, file) {
        // 先展示图片
        ctx.appendMessage({
            type: 'image',
            content: {
                picUrl: URL.createObjectURL(file)
            },
            position: 'right'
        });
        // 回复处理图片消息
        ctx.appendMessage({
            type: "text",
            content: {
                text: '抱歉，我暂时看不懂图片消息哦'
            }
        })
    }
</script>
<script src="./js/icon@0.3.0/index.js" async></script>
</body>

</html>